<template>
  <article class="page">
    <headerbar>示范带视频列表</headerbar>

    <section class="frame-content-sub bg-default">
      <section class="d-scroll list-news-img-two-col">
        <cube-scroll
          ref="scroll"
          :scrollEvents="['scroll-end']"
          :options="options"
          @pulling-up="onPullingUp"
          @pulling-down="onPullingDown"
        >
          <fetchData
            class="detail"
            :loading="isLoading"
            :data="list"
          ></fetchData>
          <div
            class="item"
            @click="goDetail(item)"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="img">
              <img
                v-if="!item.listPic"
                src="../../../../../static/images/user_bg.jpg"
                alt=""
              />
              <img
                v-if="item.listPic"
                :src="tools.getImgUrl(item.listPic, true)"
                alt=""
              />
            </div>
            <div class="cont">
              <h2 class="title">{{ item.title }}</h2>
              <div class="tip">
               播放量 {{ item.views || 0 }}
              </div>
            </div>
          </div>
          <div
            class="text-center no-data"
            v-if="!isLoading && list.length === 0"
          >
            <img src="../../../../../static/images/no_data.png" alt="" />
            <p>暂无数据</p>
          </div>
          <onBottom v-else-if="onBottom"></onBottom>
        </cube-scroll>
      </section>
    </section>
  </article>
</template>

<script>
export default {
  name: "sfdVideoMore",
  data() {
    return {
      isLoading: true,
      list: [],
      channelId: "df6ff787ac0f4eaf8ccff37fc107cf60",
      pageIndex: 1,
      pageSize: 10,
      scrollHeight: "300",
      onBottom: false,
      options: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: " ",
        },
        scrollbar: false,
      },
      userInfo: {},
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  activated() {
    if (!this.$route.meta.keepAlive) {
      this.init();
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (to.name === "sfdVideoMore") {
        to.meta.keepAlive = true;
        vm.$store.commit("addRoute", "sfdVideoMore");
      }
      next();
    });
  },
  beforeRouteLeave(to, from, next) {
    this.$route.meta.keepAlive = to.name === "videoDetail";
    if (this.$route.meta.keepAlive) {
      this.$store.commit("addRoute", "sfdVideoMore");
    } else {
      this.$store.commit("removeRoute", "sfdVideoMore");
      this.$destroy();
    }
    next();
  },
  methods: {
    init() {
      this.userInfo = this.$localStorage.get("userInfo");
      this.clickMenu();
    },
    goDetail(item) {
      this.$store.state.isVideo = true;
      this.$store.state.videoDetail = item;
      this.$store.state.newsDetail = item;
      // 缓存专辑数据
      // this.$store.state.zhuanjiList = this.list;
      // 带上专辑标识，详情页进行连续播放
      this.$router.push({
        name: "videoDetail",
        query: { id: item.id },
        // query: { id: item.id, zhuanji: 1 },
      });
    },
    getPoster(item) {
      return this.tools.getImgUrl(item.listPic);
    },
    clickMenu() {
      this.pageIndex = 1;
      this.list = [];
      this.$refs.scroll &&
        this.$refs.scroll.forceUpdate &&
        this.$refs.scroll.forceUpdate(true, false);
      this.options.isPullUpLoad = false;
      this.fetchList(this.channelId);
    },
    fetchList() {
      this.onBottom = false;
      this.isLoading = true;
      let data = {
        channelId: this.channelId,
        pageNo: this.pageIndex,
        pageSize: this.pageSize,
      };
      return this.fetchService.contentPage(data).then((res) => {
        if (res.code !== 0) {
          return this.tools.alert(
            res.message || res.resp_msg || "接口出错，请联系管理员"
          );
        }
        this.isLoading = false;
        if (this.pageIndex === 1) {
          this.list = [];
        }
        if (
          res.code === 0 &&
          res.data.page != null &&
          res.data.page.length < 1
        ) {
          this.options.pullUpLoad = false;
          this.onBottom = true;
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return;
        }
        this.list = this.list.concat(res.data.page);
        this.pageIndex++;
        this.$refs.scroll &&
          this.$refs.scroll.forceUpdate &&
          this.$refs.scroll.forceUpdate(true, false);
        return res;
      });
    },
    hasList() {
      return this.list.length > 0;
    },
    onPullingUp() {
      this.fetchList().then((res) => {
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    onPullingDown() {
      console.log("onPullingDown");
      this.options.pullUpLoad = true;
      this.pageIndex = 1;
      this.list = [];
      this.fetchList().then((res) => {
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    getRole() {
      if (this.userInfo.type === "10") {
        return false;
      } else {
        return true;
      }
    },
    updateCount(id) {
      let params = {
        contentId: id,
        type: 1,
      };
      this.fetchService.updateCount(params).then((res) => {
        if (res.code !== 0) {
          return false;
        }
        this.preData.views++;
      });
    },
  },
};
</script>


<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
</style>

